<template>
  <el-table
    :data="tableData"
    border
    show-summary
    :summary-method="getSummaries"
  >
    <el-table-column prop="id" label="序号" width="80"></el-table-column>
    <el-table-column prop="skuName" label="SKU名称"></el-table-column>
    <el-table-column prop="model" label="型号"></el-table-column>
    <el-table-column prop="brand" label="品牌"></el-table-column>
    <el-table-column prop="applyQuantity" label="申请数量"></el-table-column>
    <el-table-column prop="stockQuantity" label="库存数量"></el-table-column>
    <el-table-column prop="unit" label="单位"></el-table-column>
    <el-table-column prop="productionPeriod" label="生产期限"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          skuName: '品质',
          model: '140*60*80mm型绿色',
          brand: '会议成',
          applyQuantity: 2,
          stockQuantity: 10,
          unit: '个',
          productionPeriod: '2023-10-01'
        },
        {
          id: 2,
          skuName: '品质',
          model: '140*60*70mm型绿色',
          brand: '会议成',
          applyQuantity: 4,
          stockQuantity: 20,
          unit: '个',
          productionPeriod: '2023-10-02'
        },
        {
          id: 3,
          skuName: '品质',
          model: '160*60*90mm型绿色',
          brand: '会议成',
          applyQuantity: 1,
          stockQuantity: 15,
          unit: '个',
          productionPeriod: '2023-10-03'
        }
      ]
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      return getSummaryRow(columns, data);
    }
  }
};

// 计算某一列的总和
const calculateSum = (data, property) => {
  // 将数据中的指定属性值转换为数字，并存储在 values 数组中
  const values = data.map(item => Number(item[property]));
  // 检查 values 数组中的所有值是否都是 NaN（非数字）
  if (!values.every(value => isNaN(value))) {
    // 如果 values 数组中至少有一个值是数字，则计算总和
    return values.reduce((prev, curr) => {
      // 将当前值转换为数字
      const value = Number(curr);
      // 如果当前值是数字，则将其累加到 prev 中
      if (!isNaN(value)) return prev + curr;
      // 如果当前值不是数字，则保持 prev 不变
      return prev;
    }, 0); // 初始值为 0
  }
  // 如果 values 数组中的所有值都是 NaN，则返回空字符串
  return '';
};

// 格式化汇总值
const formatSum = (sum) => {
  return sum !== '' ? `${sum} 个` : '';
};

// 获取汇总行的值
const getSummaryRow = (columns, data) => {
  return columns.map((column, index) => {
    if (index === 0) return '总计';
    if (column.property === 'applyQuantity' || column.property === 'stockQuantity') {
      const sum = calculateSum(data, column.property);
      return formatSum(sum);
    }
    return '';
  });
};
</script>
